{% extends 'Bootstrap/base.html' %}

{% block content %}
    <div class="container" style="width:800px; height:800px; margin: 100px auto;">
    <div class="panel panel-primary">
        <div class="panel-heading" ><h1>{{ the_name }}</h1>今日路况：</div>
        <div class="panel-body">
             <table style="width:600px; margin: auto;">
                 <tr style="margin: 0px;padding: 0px;" height="60px">
                     <div style="margin-top: 60px;margin-left: 70px;">
                        <h1 style="font-size: 48px">{{ the_row_description }}</h1>
                     </div>
                 </tr>

                 <tr>
                 <td  style="width: 200px;text-align: center">
                     <div>
                         <h4>车辆畅通</h4>
                     </div>
                 </td>
                     <td  >
                         <div class="progress">
                             <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: {{ the_row_expedite }}">
                                 <span class="sr-only">40% Complete (success)</span>
                             </div>
                         </div>

                     </td>
                 </tr>

                 <tr>
                 <td style="text-align: center">
                     <div >
                         <h4>车辆缓行</h4>
                     </div>
                     </td>
                     <td>
                         <div class="progress">
                             <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:{{ the_row_congested }}">
                                 <span class="sr-only">60% Complete (warning)</span>
                             </div>
                         </div>
                     </td>
                 </tr>


                 <tr>
                 <td style="text-align: center">
                     <div >
                         <h4>车辆拥堵</h4>
                     </div>
                     </td>
                     <td>
                         <div class="progress">
                             <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:{{ the_row_blocked }}">
                                 <span class="sr-only">80% Complete (danger)</span>
                             </div>
                         </div>

                     </td>
                 </tr>


                 <tr>
                 <td style="text-align: center">
                     <div >
                         <h4>路况级别</h4>
                     </div>
                     </td>

                     <td>

                         <div>{{ the_row_status }}</div>

                     </td>
                 </tr>



             </table>
            <div style="width:600px; margin: 40px auto;margin-left: 70px;">
                <h4>{{ the_row_tr_description }}</h4>
            </div>



            <form method="post" action="/entry" style="margin-top: 100px;">
                <button class="btn btn-lg btn-primary btn-block" type="submit">返回首页</button>
            </form>
        </div>
    </div>
    </div>

{% endblock %}